<script>
import { HomeFilled,UserFilled,PictureFilled,GoodsFilled,TrendCharts, Folder,Edit,Location} from '@element-plus/icons-vue'
import {mapState} from 'vuex'
//渲染侧边栏
import {routes}from '@/router'

export default{
    data() {
        return {
          path:''
        }
    },
    methods: {
        
    },
    computed:{
      ...mapState(['userInfo']),
      menus(){
        //如果当前登录的是 admin ,那么开放所有权限，否则开放自身权限
        return this.userInfo.adminname=='admin'? routes[0].children :this.userInfo.checkedkeys
      }
    },
    //侦听器监听路由路径
    watch:{
      $route:{
        //配置非惰性
        immediate:true,
        handler(newRoute){
          this.path=newRoute.path
        }
      }
    },
    components:{
        HomeFilled,
        UserFilled,
        PictureFilled,GoodsFilled,TrendCharts, Folder,Edit,Location
    },
    props:{
        collapse:Boolean
    }
}
</script>

<template>
    <!--:collapse-transition="false"用来跳过动画  -->
     <el-menu router 
      :collapse-transition="false"
      unique-opened
      :default-active="path"
      class="el-menu-vertical-demo"
      mode="vertical"
      :collapse="collapse"> 
      <el-menu-item index="/">
            <el-icon><HomeFilled /></el-icon>
            <span>首页</span>
      </el-menu-item>

      <el-sub-menu v-for="item in menus" :key="item.path" :index="item.path">
          <template #title>
            <el-icon>
              <component :is="item.icon"></component>
            </el-icon>
            <span>{{item.label}}</span>
          </template>
            <el-menu-item v-for="child in item.children" :key="child.path" :index="`/${item.path}/${child.path}`">
               <el-icon>
                <component :is="child.icon"></component>
              </el-icon>
              {{ child.label }}
            </el-menu-item>
        </el-sub-menu>


        <!-- <el-sub-menu index="1">
          <template #title>
            <el-icon><UserFilled /></el-icon>
            <span>账号管理</span>
          </template>
            <el-menu-item index="1-1"> <el-icon><UserFilled /></el-icon>管理员列表</el-menu-item>
            <el-menu-item index="1-2"> <el-icon><UserFilled /></el-icon>用户列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
            <template #title>
            <el-icon><UserFilled /></el-icon>
            <span>轮播图管理</span>
          </template>
          <el-menu-item index="2-1"> <el-icon><UserFilled /></el-icon>轮播图列表</el-menu-item>
            <el-menu-item index="2-2"> <el-icon><UserFilled /></el-icon>添加轮播图</el-menu-item>
        </el-sub-menu> -->

        <!-- 渲染侧边栏 -->
        

      </el-menu>
</template>